import './index.scss'
import { useEffect } from 'react'
import { getMap } from '../../api/index.js'
import NavHeader from '../../components/NavHeader'
// import './index.scss'
import styles from './index.module.scss'
const BMap = window.BMap
// 覆盖物样式
const labelStyle = {
  cursor: 'pointer',
  border: '0px solid rgb(255, 0, 0)',
  padding: '0px',
  whiteSpace: 'nowrap',
  fontSize: '12px',
  color: 'rgb(255, 255, 255)',
  textAlign: 'center'
}
const Map = () => {
  useEffect(() => {
    initMap()
  }, [])
  // 初始化地图
  const initMap = () => {
    // 获取当前定位城市
    const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))
    console.log(label, value)

    // 注意: 在脚手架中全局对象需要使用window来访问
    // 初始化地图实例
    const map = new BMap.Map('container')
    // 设置中心点坐标
    // const point = new BMap.Point(116.404, 39.915)

    // 创建地址解析器实例
    const myGeo = new BMap.Geocoder()
    // 将地址解析结果显示在地图上，并调整地图视野
    myGeo.getPoint(
      label,
      async function (point) {
        if (point) {
          // 初始化地图
          map.centerAndZoom(point, 11) // 缩放级别11
          // map.addOverlay(new BMap.Marker(point))  //标记物

          // 添加常用控件
          map.addControl(new BMap.NavigationControl()) // 缩放
          map.addControl(new BMap.ScaleControl()) // 比例尺

          // 获取房源数据
          const res = await getMap(value)
          console.log('房源数据', res)

          // 遍历房源 创建覆盖物
          res.data.body.forEach(item => {
            // 解构出区的地理位置
            const {
              coord: { longitude, latitude },
              label: areaName,
              count,
              value
            } = item
            // 创建覆盖物文本标注对象
            const areaPoint = new BMap.Point(longitude, latitude)
            const opts = {
              position: areaPoint, // 指定文本标注所在的地理位置
              offset: new BMap.Size(-35, -35) // 设置文本偏移量
            }
            // 设置setContent后 第一个参数失效  清空即可
            const label = new BMap.Label('', opts)

            // 添加唯一标识
            label.id = value
            // 设置房源覆盖物内容
            label.setContent(`
          <div class="${styles.bubble}">
            <p class="${styles.name}">${areaName}</p>
            <p>${count}</p>
          </div>
        `)

            // 自定义文本标注样式
            label.setStyle(labelStyle)

            // 添加单击事件
            label.addEventListener('click', () => {
              console.log(label.id)

              // 放大地图, 当前点击的覆盖物为中心  11=13
              map.centerAndZoom(areaPoint, 13)

              // 加定时器 解决百度API报错问题
              setTimeout(() => {
                // 清除当前覆盖物
                map.clearOverlays()
              }, 0)
            })

            // 添加覆盖物到地图中
            map.addOverlay(label)
          })
        }
      },
      label
    )
    // 初始化地图
    // map.centerAndZoom(point, 15)
  }
  return (
    <div className={styles.map}>
      {/* 顶部导航 */}
      <NavHeader>地图找房</NavHeader>
      <div id="container" className="container">
        111
      </div>
    </div>
  )
}

export default Map
